<template>
  <div class="bg">
    <img src="@/assets/login-bgc.png" alt="">
    <div class="back" @click="() => {
      // router.push({ path: '/home' });
      router.back();
    }">
      <i class="iconfont icon-fanhui"></i>
    </div>
  </div>
  <div class="login-register">
    <div class="logo">
      <img src="@/assets/avatar.png" alt="">
    </div>
    <p>发现美味，分享生活</p>
    <div class="tab">
      <div :class="{ 'active': currentTag === 'login' }" @click="changeTag('login')">登录</div>
      <div :class="{ 'active': currentTag === 'register' }" @click="changeTag('register')">注册</div>
    </div>
    <div class="login" v-if="currentTag === 'login'">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="username" label-width="50px" name="username" label="账号" placeholder="请输入账号"
            style="margin-bottom: 8px;" />
          <van-field v-model="password" label-width="50px" type="password" name="password" label="密码" placeholder="密码"
            style="margin-bottom: 8px;" />
        </van-cell-group>
        <div class="remember-forget">
          <div class="remember" @click="toggleCheckbox"><input type="checkbox" v-model="isChecked"
              style="width: 14.5px;height: 14.5px;">记住我</div>
          <div class="forget">忘记密码？</div>
        </div>
        <div>
          <van-button @click="login" round block type="primary" native-type="submit" style="background-color: #FF6B35;">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="register" v-else>
      <van-form>
        <van-cell-group inset>
          <van-field v-model="username" label-width="50px" name="username" label="账号" placeholder="请输入账号"
            style="margin-bottom: 8px;" />
          <van-field v-model="password" label-width="50px" type="password" name="password" label="密码" placeholder="密码"
            style="margin-bottom: 8px;" />
          <van-field v-model="verifycode" type="text" name="verifyCode" placeholder="验证码">
            <template #button>
              <verifyImg ref="verifyImgRef" />
            </template>
          </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button @click="register" round block type="primary" native-type="submit"
            style="background-color: #FF6B35;">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import verifyImg from '@/components/verifyCode.vue';
import { showFailToast, showSuccessToast } from 'vant';
import md5 from 'js-md5';
import { userLogin, userRegister } from '@/api/index.js'
import router from '@/router/index.js';

const username = ref('')
const password = ref('')
const verifyImgRef = ref(null)

const verifycode = ref('')

const currentTag = ref('login')
const isChecked = ref(false)
const changeTag = (tag) => {
  currentTag.value = tag
}
const toggleCheckbox = () => {
  isChecked.value = !isChecked.value
}

const login = async () => {
  if (username.value === '' || password.value === '') {
    showFailToast('账号或密码为空');
    return;
  }
  // 发送登录请求
  const res = await userLogin({ username: username.value, password: md5(password.value) })

  if (res.data.length === 0) {
    showFailToast('用户名或密码错误')
  } else {
    if (isChecked.value) {
      localStorage.setItem('token', res.token)
    } else {
      localStorage.removeItem('token')
      sessionStorage.setItem('token', res.token)
    }

    localStorage.setItem('userInfo', JSON.stringify(res.data))

    showSuccessToast('登录成功');

    router.back();
  }
}

const register = async () => {
  if (username.value === '' || password.value === '') {
    showFailToast('账号或密码为空');
    return;
  }
  // console.log('submit', values);
  // console.log(verifyImgRef.value.verifyCode);
  // 发注册的接口请求
  if (verifycode.value === verifyImgRef.value.verifyCode) {  // 允许注册
    // 将账号和密码发送给后端
    const res = await userRegister({ username: username.value, password: md5(password.value) })
    console.log(res);
    if (res.note === 2) {
      showSuccessToast(res.message)
      currentTag.value = 'login';
    } else {
      showFailToast(res.message)
    }
  } else {
    showFailToast('验证码不正确')
  }
};
</script>

<style lang="less" scoped>
.bg {
  position: relative;
  width: 100%;
  height: auto;

  img {
    width: 100%;
  }

  .back {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);

    i {
      color: #FFF;
      font-size: 15px;
    }
  }
}

.login-register {
  margin: 0 24px;
  margin-top: -80px;
  padding: 32px 24px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  position: relative;
  z-index: 1;

  .logo {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  p {
    text-align: center;
    font-weight: 400;
    font-size: 0.38rem;
    color: #4B5563;
    margin-top: 14px;
  }

  .tab {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    display: flex;
    font-weight: 400;
    font-size: 14px;
    color: #9CA3AF;
    line-height: 30px;

    div {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .active {
      color: #FF6B35;
      border-bottom: 3px solid #FF6B35;
    }
  }

  .login,
  .register {
    margin-top: 12px;
  }

  .login {
    .remember-forget {
      margin: 16px 0;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      .remember {
        color: #4B5563;
        display: flex;
        align-items: center;
      }

      .forget {
        color: #FF6B35
      }
    }
  }

}
</style>
